<#include "../common/scripts.html">
<style>

    .border tbody tr td:nth-child(odd) {
        width: 140px;
    }

    .border tbody tr td:nth-child(even) {
        width: 200px;
    }

    /*.detail-table-wrap {
        width:680px;
        overflow-y: auto;
        padding-bottom:5px;
        height: 400px;
    }

    .border2>tbody>tr>td input {
        border: none;
        width: 100%;
        background: #fff;
        text-align: center;
    }

    .border2 thead th{
        width:100px;
        background-color: #EDEFF0;
        text-align: center;
        border: 1px dotted #ccc;
    }

    .border2 tbody td{
        width:100px;
        text-align: center;
        border: 1px dotted #ccc;
    }
*/
    /***隐藏导出按钮**/
    .dt-buttons {
        display: none;
    }

</style>
<div class="page-content detail-content page-content-main" style="height: 650px;">
    <form action="" method="post" id="addForm" class="form-horizontal">
        <input type="hidden" id="roleId" value="${role.id}" >
        <div class="fh-subtitle">角色信息</div>
        <table class="border" style="width: 70%">
            <tr>
                <td>角色名称</td>
                <td style="position: relative;">
                    <input type="text" class="form-control-gx"
                           value="${role.roleName}" maxlength="50" autocomplete="off" readonly/>
                </td>
                <td>角色编号</td>
                <td style="position: relative;">
                    <input type="text" class="form-control-gx"
                           value="${role.roleCode}" maxlength="50" autocomplete="off" readonly/>
                </td>
            </tr>
            <tr>
                <td>所属应用系统</td>
                <td style="position: relative;text-align: left;" colspan="3">
                    <input type="hidden" id="applicationId" name="applicationId" value="${application.id}" />
                    <input type="text" class="form-control-gx" readonly
                           name="applicationName" id="applicationName" value="${application.applicationName}" maxlength="50" autocomplete="off"/>
                </td>
            </tr>
        </table>
        <div class="fh-subtitle">分配用户
            <span class="btn btn-xs glyphicon glyphicon-plus" onclick="add()">选择</span>
        </div>
        <!--<div class="detail-table-wrap">
            <table id="detail-table" class="border2" style="width: 680px;border: 1px solid #ccc;">
                <thead>
                <tr>
                    <th>姓名</th>
                    <th>登录名</th>
                    <th>工号</th>
                    <th style="width: 20px;">操作</th>
                </tr>
                </thead>
                <tbody>
                </tbody>
            </table>
        </div>-->
        <div style="width:70%!important;padding: 0px;">
            <table id="mainTable" class="eamtable"></table>
        </div>
    </form>

    <!--<div class="text-center" style="width: 500px; margin-top: 20px;margin-bottom: 60px;margin-left: 90px; ">
        <span class="model-btn" onclick="submit()" style="width:80px;">保存</span>
    </div>-->
</div>
<script type="text/javascript">
    var dataTable = $("#mainTable");
    $(function () {
        sys.useSimpleRetrieveData();
        var staticPrefix = "${static}";
        var config = sys.DynamicDatabeConfig(staticPrefix, getSearchUrl(), [
            {data: "username", title: "登录名"},
            {data: "name", title: "姓名",},
            {data: "userCode", title: "工号"},
            {
                data: null,
                width:20,
                title: "操作",
                render: function (data) {
                    return getOperHtml(data.userId,data.roleId);
                },
            }

        ], true, {ordering: true});

        config.bSort = true;
        config.aLengthMenu = [10,20,50,100];
        //滚动设置
        config.scrollX = true;
        config.autoWidth = true;
        config.scrollY = "60%";
        config.ordering = true;
        dataTable.dataTable(config);
    });

    function getSearchUrl() {
        var url = '/role/ajaxLoadUserRoleData?roleId=' + $("#roleId").val();
        return url;
    }

    function getOperHtml(userId,roleId) {
        var  html = '';
        html += '<a onclick="deleteUserRole(\''+userId+'\',\''+roleId+'\');return false;" title="删除用户"><i class="fa fa-trash-o iconBtn" style="color: rgb(221, 90, 67)"></i></a>';
        return html;
    }

    function deleteUserRole(userId,roleId) {
        sys2.confirm("确定删除该数据吗？", function(){
            sys2.getApiData("deleteUserRole", {
                userId : userId,
                roleId:roleId
            }, back, "post");
            function back(data) {
                js.showMessage(data.data,"","success",1500)
                dataTable.dataTable().api().ajax.reload(null, false);
            }
        });
    }

    /*********
     * 添加用户
     */
    function add() {
       /* var arr = [];
        $("#detail-table tbody [data-itemid]").each(function(){
            var id = $(this).attr("data-itemid");
            if(id){
                arr.push(id);
            }
        })*////保留备用
        showLayerWindow(null, "选择用户", "selectUser?roleId="+$("#roleId").val(), ['800px', '500px'], ['10px'], false);
    }

    /*function addUser(arr){
        if(!arr){
            return;
        }
        var html = "";
        for(var i = 0; i < arr.length; i++){
            var item = arr[i];
            html += "<tr class='user-row'>";
            html += "<td data-itemid='"+(item.id||"")+"'><input name='name' readonly class='form-control-gx' value='"+(item.name ||"")+"'/></td>";
            html += "<td><input name='username' readonly class='form-control-gx' value='"+(item.username ||"")+"'/></td>";
            html += "<td><input name='userCode' readonly class='form-control-gx' value='"+(item.userCode ||"")+"'/></td>";
            html += "<td style='width: 20px;'><span class='btn btn-xs glyphicon glyphicon-trash' style='background-color:rgba(0,0,0,0); color:rgb(221, 90, 67);' onclick='$(this).parent().parent().remove();' title='删除'></span></td>";
            html += "</tr>";
        }
        $("#detail-table tbody").append(html);
    }*/
    function reload() {
        dataTable.dataTable().api().ajax.reload(null, false);
    }
</script>
